﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>JQuery Tutorial</title>
    <!--<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>-->
    <script src="Scripts/jquery-1.8.2.js"></script>
    <script src="Scripts/custom.js" ></script>



    <style type="text/css">
        .blue
        {
            color: blue;
        }

        .space
        {
            margin-top: 20px;
            border-top: 20px solid #333;
            width: 600px;
        }

        select .defaultOption
        {
            background-color:gray;
           
        }



    </style>

</head>
<body>
    <div>
        <h2 id="dynamicHeader">This is a dynamic header.</h2>
        <p>If you click on me, I will disappear.</p>
        <p>I am not the first, will not disappear.</p>
        <p id="testbtn1">This is test p for button <b>Show Text</b>.</p>
        <p id="testbtn2">This is test p for button <b>Show HTML</b>.</p>
        <a id="jquery" href="http://jquery.com/">JQuery</a>
        <button id="btn1">Show Text</button>
        <button id="btn2">Show Html</button>
        <button id="btn3" >Add classes to elements</button>
        <button id="btn4">Remove classes from elements</button>
    </div>

    <div class="space">
        <input type="checkbox" id="checkbox1" />
        <button id="btn5" onclick='$("#checkbox1").attr("checked", true)'>Check</button>
        <button id="btn6" onclick='$("#checkbox1").removeAttr("checked")'>UnCheck</button>
    </div>

    <div class="space">
        <select id="myselect">
            <option value="1" class="defaultOption">Mr</option>
            <option value="2">Mrs</option>
            <option value="3">Ms</option>
            <option value="4">Dr</option>
            <option value="5">Prof</option>
        </select>
         <input type="button" value="Get Value" onclick="alert($('#myselect').val())"/>
        <input type="button" value="Get Text Value" onclick="alert($('#myselect option:selected').text())"/>
    </div>

        <script type="text/javascript">
            document.write("<p>" + Date() + "</p>");
            //document.getElementById("dynamicHeader").innerText = Date();
    </script>

</body>
</html>
